<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue快速入门</title>
    <!-- 导入vue.js -->
    <!-- <script src="./js/vue.js"></script> -->

</head>

<body>
    <!-- 视图：负责页面渲染，主要是HTML+CSS -->
    <div id="div">
        <!-- 数据绑定 -->
        {{message}} 
        <br>
        <button onclick="hi()">打招呼方法</button>
        <div>姓名：{{name}}</div>
        <div>班级：{{className}}</div>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本：负责业务数据模型
    let vm = new Vue({
        // el：用于接收获取到页面中的元素
        el: "#div",
        // data：用于保存当前Vue对象中的数据。视图中声明变量需要在此处赋值
        data: {
            message: "你好！Vue.js!",
            name: "张三",
            className: "程序员之家"
        },
        // methods：用于定义方法，可以直接通过对象名调用。this代表当前vue
        methods: {
            // 方法定义在methods中
            show() {
                alert(this.message);
            },
            // 定义study()方法
            study() {
                alert(this.name + " 正在 " + this.className + " 好好学习!");
            }
        }
    });

    // 定义打招呼方法
    function hi() {
        vm.show();
    }

    // 定义修改班级
    function update() {
        vm.className = "程序员社区";
        vm.study();
    }

</script>

</html>